<script lang="ts" setup>
import {type Ref, ref, onMounted} from "vue";
import Nav_bottom from "@/componets/nav/nav_bottom";
import {goPackageDe} from "@/util/go"
import {baseUrl} from "@/api/http"
import {getPackageTypeList, type PackageTypeVo} from "@/api/package/packageType";
import {getPackageList, type PackageVo, type Query} from "@/api/package/package";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {onReachBottom, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";

const currentCategory = ref(0);

const packageTypeQuery:Ref<Query> = ref({
  id: 0,
  typeId: 0,
  name:null,
  price: 0,
  lable: null,
  pageNum: 1,
  pageSize: 10,
})

const selectCategory = (index: number) => {
  packageTypeQuery.value.pageNum = 1
  currentCategory.value = index;
  packageTypeQuery.value.typeId = index
  packageList.value = []
  getList()
};

const showDetail = (item: any) => {
  uni.showToast({
    title: `查看${item.title}详情`,
    icon: "none",
  });
};

const typeList = ref([{
  id: 0,
  packageTypeName: "全部"
}])

const packageList: Ref<PackageVo[]> = ref([])

const search = () => {
  packageList.value = []
  packageTypeQuery.value.pageNum = 1
  getList()
}


const getTypeList = () => {
  getPackageTypeList().then(res => {
    typeList.value.push(...res.data.data.data)
  })
}

onReachBottom(() => {
  getList()
})

const getList = () => {
  getPackageList(packageTypeQuery.value).then(res => {
    [...res.data.data.data.records].map(i => {
      i.label = i.label.split(",")
      packageList.value.push(i)
      packageTypeQuery.value.pageNum++
    })
  })
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  
  
getList()
getTypeList()

</script>

<template>
  <view class="page">
    <!-- 头部搜索区域 -->
    <view class="header">
      <view class="title-bar">
        <text class="title">套餐</text>
      </view>
      <view class="search-box">
        <uni-icons type="search" size="20" color="#999999" />
        <input type="text" placeholder="搜索" v-model="packageTypeQuery.name" placeholder-class="placeholder" />
		    <button type="primary" @click="search"  size="mini">搜索</button>
      </view>
    </view>

    <!-- 分类标签区域 -->
    <scroll-view class="category-scroll" scroll-x>
      <view class="category-list">
        <view
          v-for="(item, index) in typeList"
          :key="index"
          :class="['category-item', currentCategory === item.id ? 'active' : '']"
          @tap="selectCategory(item.id)"
        >
          {{ item["packageTypeName"] }}
        </view>
      </view>
    </scroll-view>
	
	<view class="empty-state" v-if="packageList.length === 0">
	  <uni-icons type="info" size="48" color="#7fbfb0" />
	  <text class="empty-text">暂无相关套餐</text>
	  <text class="empty-subtext">敬请期待</text>
	</view>

    <!-- 商品列表区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <view class="service-list">
        <view
          class="service-item"
          v-for="(item, index) in packageList"
          :key="index"
          @click="goPackageDe(item.id + '')"
        >
          <image class="service-image" :src="baseUrl + item.file[0].clientUrl" mode="aspectFill" />
          <view class="service-info">
            <view class="service-title">{{ item.name }}</view>
            <view class="price-box">
              <text class="current-price">¥{{ item.price }}</text>
              <text class="original-price">¥{{ item.price + 100 }}</text>
            </view>
            <view class="service-tag">{{ item.label[0] }}</view>
          </view>
          <view class="detail-btn" @tap="showDetail(item)">详情</view>
        </view>
      </view>
    </scroll-view>

  </view>
  <nav_bottom :index="2"></nav_bottom>
</template>



<style scoped lang="scss">

.empty-state {
  .empty-text {
    font-size: 16px;
    color: #333;
    margin-top: 10rpx;
  }
  .empty-subtext {
    font-size: 14px;
    color: #999;
    margin-top: 5rpx;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  text-align: center;
  color: #999;
  font-size: 14px;
  background-color: white;
  width: 90%;
  margin: 50px auto;
  border-radius: 15rpx;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05)
}

.page {
  padding-top: 90rpx;
  display: flex;
  flex-direction: column;
  height: 90vh;
  padding-bottom: 100rpx;
  background-color: #f8f8f8;
}

.header {
  padding: 20rpx;
  background-color: #ffffff;
}
.title-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}
.icons {
  display: flex;
  gap: 20rpx;
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 16rpx 24rpx;
  border-radius: 8rpx;
}
.search-box input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 28rpx;
}
.placeholder {
  color: #999999;
}
.category-scroll {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.category-list {
  display: flex;
  padding: 0 20rpx;
  white-space: nowrap;
}

.category-item {
  display: inline-block;
  padding: 20rpx 30rpx;
  font-size: 14px;
  color: #666666;
  position: relative;
}

.category-item.active {
  color: #4caf50;
}

.category-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #4caf50;
  border-radius: 2rpx;
}

.content-scroll {
  flex: 1;
  overflow: auto;
}

.service-list {
  padding: 20rpx;
}

.service-item {
  display: flex;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.service-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-title {
  font-size: 16px;
  color: #333333;
  font-weight: 500;
}

.price-box {
  margin: 10rpx 0;
}

.current-price {
  font-size: 18px;
  color: #4caf50;
  font-weight: bold;
  margin-right: 10rpx;
}

.original-price {
  font-size: 14px;
  color: #999999;
  text-decoration: line-through;
}

.service-tag {
  font-size: 12px;
  color: #666666;
}

.detail-btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #e8f5e9;
  color: #4caf50;
  border-radius: 30rpx;
  font-size: 14px;
  align-self: center;
}
</style>
